<template>
  <div class="">
    <dl class="m-categroy">
      <dt>按拼音首字母:</dt>
      <dd v-for="item in list" :key="item"><a :href="'#city-'+item">{{item}}</a></dd>
    </dl>
    <dl v-for="(item,index) in block" :key="index" class="m-categroy-section">
      <dt :id="'city-'+ item.title">{{item.title}}</dt>
      <dd>
        <span v-for="city in item.city" :key="city.name">{{city.name}}</span>
      </dd>
    </dl>
  </div>
</template>
<script>
import pinyin from 'js-pinyin'
export default {
  data () {
    return {
      list: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''),
      block: [{
        title: 'B',
        city: ['北京','包头']
      }]
    }
  },
  async mounted() {
    let block = []
    let {status,data:{city}} = await this.$axios.get('http://localhost:3200/geo/city')
    if (status === 200) {
        let p
        let c
        let d = {}

        city.forEach(item => {
          p = pinyin.getFullChars(item.name).toLocaleLowerCase().slice(0,1)
          c = p.charCodeAt(0)
          if (c > 96 && c < 123) {
            if (!d[p]) {
              d[p] = []
            }
            d[p].push(item)
          }
        })
      for (let [k,v] of Object.entries(d)) {
        block.push({
          title: k.toUpperCase(),
          city: v
        })
      }
      block.sort((a,b) => a.title.charCodeAt(0) - b.title.charCodeAt(0))
      this.block = block
    }
  }
}
</script>
<style lang="scss">
@import "../../assets/css/changecity/categroy";
</style>
